import React, { useCallback, useEffect, useState, useRef } from "react";
import { Spin, notification } from "antd";
import styles from './styles/map.module.css'
import './styles/weatherIcon.less'
import mapUtils from "./utils";
import Module2 from "./components/module-2";
import Module1 from "./components/module-1";
import Module3 from "./components/module-3";
import Module4 from "./components/module-4";
import AddressList from "./components/AddressList";




const Map = () => {
  const [spinning, setSpinning] = useState(false);
  const drawerRef = useRef('drawerRef')
  const [address, setAddress] = useState("中国");
  const [areaList, setAreaList] = useState([
    // {
    //   areaCode: "120000",
    //   areaName: "天津市",
    //   count: "1",
    //   latitude: "39.11036659009852",
    //   longitude: "117.22763835375439",
    // }
  ])
  const { initMap, setLastAreaName, setMapCenter } = mapUtils(setSpinning, drawerRef, setAddress, setAreaList);


  useEffect(() => {

    try { // 检测 BMapGL 是否存在
      new BMapGL.Geocoder()

      setTimeout(() => {
        initMap();
        setLastAreaName();
      }, 0);
    } catch (error) {
      console.error(error);
      notification.error({
        message: '温馨提醒',
        description: '地图加载失败，请检查网络或尝试刷新页面',
        placement: 'top',
      })
    }



  }, []);



  const spinOption = {
    size: "large",
    tip: "正在加载中...",
    style: {
      // position: "fixed",
      height: "100%",
      maxHeight: "none",
    },
    spinning,
  };
  const [newDate, setNewDate] = useState()

  useEffect(() => {
    const timmer = setInterval(() => {
      setNewDate(new Date().toLocaleString())
    }, 1000);
    return () => {
      clearInterval(timmer)
    }
  }, [])

  return (

    <div className={`page-content ${styles.map}`}>
      <Spin {...spinOption}>
        <div id='container'></div>
        <div className={styles.header}>
          <div className={styles.title}>灾害实时预警</div>
          <div className={styles.date}>{newDate}</div>
        </div>
        {/* 灾害范围 */}
        {/* <Module1
          address={address}
          style={{
            top: '30px',
            left: '10px',
          }}
          desc="受灾地区和受灾数量"
          title="灾害情况"
          key="InsuranceAmount"
        /> */}
        <AddressList
        setMapCenter={setMapCenter}
          list={areaList}
          style={{
            top: '30px',
            left: '10px',
          }}

        />
        {/* 出险情况 */}
        <Module2
          address={address}
          style={{
            top: '380px',
            left: '10px',
          }}
          title="出险情况"
          key="Premium"
        />
        {/* 应急事项 */}
        <Module3
          address={address}
          style={{
            top: '380px',
            right: '10px',
          }}
          desc="应急事项"
          title="应急事项"
          key="event"
        />
        {/* 保额占比  */}
        <Module4

          address={address}
          style={{
            top: '30px',
            right: '10px',
          }}
          desc="保额占比"
          title="保额占比"
          key="Indemnity"
        />
      </Spin>


    </div>
  );
};

export default Map;
